<!--  -->
<template>
  <div v-loading="loadingYtj" element-loading-text="正在加载一体机信息……">
    <DivideSelector
      class="mt-5"
      :list="placeArr"
      :activeIndex="activeTableTab"
      @change="changeTableTab"
    ></DivideSelector>
    <div class="w-full h-[440px] grid grid-cols-2 mt-5 relative" v-if="!showDetail">
      <div class="w-full flex justify-start items-center flex-col">
        <div class="order-title shrink-0 my-5">一体机使用量排名前五</div>
        <div class="w-full">
          <div
            v-for="(item, index) in topArr"
            :key="index"
            class="flex items-center my-5 pl-5 line-color-0"
          >
            <div class="idx mr-4 shrink-0">{{ index + 1 }}</div>
            <div class="w-full">
              <div class="line-name flex justify-between">
                <div>{{ item.machinename }}</div>
                <div>{{ item.sumcount }}</div>
              </div>
              <div class="line-body w-[100%] h-2 bg-white/20 rounded-lg">
                <div
                  class="line-inner h-2 rounded-lg"
                  :style="{
                    width: `${Math.floor((item.sumcount / Math.max(...topArr.map((e) => e.sumcount))) * 100)}%`
                  }"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full flex justify-start items-center flex-col">
        <div class="order-title shrink-0 my-5">一体机使用量排名末五</div>
        <div class="w-full h-full">
          <div
            v-for="(item, index) in bottomArr"
            :key="index"
            class="flex items-center my-5 pl-5 line-color-normal"
          >
            <div class="idx mr-4 shrink-0">{{ index + 1 }}</div>
            <div class="w-full">
              <div class="line-name flex justify-between">
                <div>{{ item.machinename }}</div>
                <div>{{ item.sumcount }}</div>
              </div>
              <div class="line-body w-[100%] h-2 bg-white/20 rounded-lg">
                <div
                  class="line-inner h-2 rounded-lg"
                  :style="{
                    width: `${Math.floor((item.sumcount / (Math.max(...bottomArr.map((e) => e.sumcount)) + 800)) * 100)}%`
                  }"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="w-full h-[440px] overflow-y-scroll orderBody" v-else>
      <div
        v-for="(item, index) in tableData"
        :key="index"
        class="flex items-center my-5 pl-5 text-xl"
        :class="
          item.sumcount > 15000
            ? 'line-color-0'
            : item.sumcount > 7000
              ? 'line-color-1'
              : 'line-color-2'
        "
      >
        <div class="idx mr-4 shrink-0">{{ index + 1 }}</div>
        <div class="w-[400px]">
          <div class="line-name flex justify-between">
            <div>{{ item.machinename }}</div>
            <div>{{ item.sumcount }}</div>
          </div>
          <div class="line-body w-[100%] h-2 bg-white/20 rounded-lg">
            <div
              class="line-inner h-2 rounded-lg"
              :style="{
                width: `${Math.floor((item.sumcount / Math.max(...topArr.map((e) => e.sumcount))) * 100)}%`
              }"
            ></div>
          </div>
        </div>
        <div class="w-[500px] ml-5 flex items-end h-[1.5rem] text-ellipsis text-nowrap">
          {{ item.detailedaddress }}
        </div>
      </div>
      <!-- <el-table
        :data="tableData"
        stripe
        max-height="460px"
        style="width: 100%"
        class="table mt-[22px]"
        height="460px"
      >
        <el-table-column prop="machinename" label="设备名称" width="300">
          <template #default="scope">
            <div :style="{ color: scope.row.sumcount > 15000 ? '#f66436' : '' }">
              {{ scope.row.machinename }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="detailedaddress" label="一体机地址" />
        <el-table-column prop="sumcount" label="业务办理量（次）" width="150">
          <template #default="scope">
            <div :style="{ color: scope.row.sumcount > 15000 ? '#f66436' : '' }">
              {{ scope.row.sumcount }}
            </div>
          </template>
        </el-table-column>
      </el-table> -->
    </div>
    <div class="absolute bottom-0 left-1/2 -translate-x-1/2 z-10">*统计时长为近一年</div>
  </div>
</template>

<script setup lang="ts">
import { requestApi } from '@/api'
import DivideSelector from '@/components/left/Inner/components/DivideSelector.vue'
import type { ytjDetail } from '@/types/baseTypes'
import { reverse } from 'lodash'
import { onMounted, ref } from 'vue'

const tableData = ref<ytjDetail[]>([])
const showDetail = ref(true)
const placeArr = ref([
  {
    label: '全部',
    value: '0'
  }
])
onMounted(() => {
  initTotal()
})
//加载首页排序
const topArr = ref<ytjDetail[]>([])
const bottomArr = ref<ytjDetail[]>([])
const loadingYtj = ref(false)
const allTownData = ref()
const initTotal = () => {
  console.log('加载首页排序')
  loadingYtj.value = true
  Promise.all([
    requestApi.GetYtjcount({
      params: {
        order: 'desc'
      }
    }),
    requestApi.GetYtjcountTown({
      params: {
        type: 'town',
        order: 'desc'
      }
    })
  ]).then((res) => {
    const TotalRes = res[0]
    loadingYtj.value = false
    topArr.value = TotalRes.slice(0, Math.min(TotalRes.length, 5))
    bottomArr.value = reverse(TotalRes.slice(-6).splice(0, 5))
    console.log('一体机信息', topArr.value, bottomArr.value)

    const TownRes = res[1]
    TownRes.forEach((item, index) => {
      placeArr.value.push({
        label: item.townname,
        value: `${index + 1}`
      })
    })
    TownList.value = TownRes

    loadingYtj.value = false
  })
}
const TownList = ref<
  {
    townname: string
    ytjlist: ytjDetail[]
  }[]
>([])
const activeTableTab = ref('')
const changeTableTab = (idx: string | number) => {
  activeTableTab.value = `${idx}`
  if (`${idx}` == '0') {
    showDetail.value = false
    // initTotal()
  } else {
    showDetail.value = true
    initTable(`${idx}`)
  }
}
const initTable = (idx: string) => {
  const findIndex = placeArr.value.findIndex((e) => e.value == idx)
  tableData.value = TownList.value[findIndex - 1].ytjlist
  // loadingYtj.value = true
  // requestApi
  //   .GetYtjcountTown({
  //     params: {
  //       type: 'town',
  //       order: 'desc'
  //     }
  //   })
  //   .then((res) => {
  //     loadingYtj.value = false
  //     console.log('详情信息', res)
  //   })
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */

.orderBody::-webkit-scrollbar {
  display: none;
}

.order-title {
  line-height: 37px;
  font-size: 20px;
  position: relative;
  &::before {
    content: '';
    position: absolute;
    background: url('@/assets/Group 96@2x.png');
    background-size: 100% 100%;
    width: 114px;
    height: 37px;
    left: -60%;
    top: 0;
  }
  &::after {
    content: '';
    position: absolute;
    background: url('@/assets/Group 97@2x.png');
    background-size: 100% 100%;
    width: 114px;
    height: 37px;
    right: -60%;
    top: 0;
  }
}

.line-color-normal {
  .idx {
    background-color: #4f8bda;
    width: 1.5rem;
    height: 1.5rem;
    text-align: center;
    line-height: 1.5rem;
    border-radius: 3px;
  }
  .line-inner {
    transition: all 0.5s;
    background: linear-gradient(90deg, #4f8bda, #7cd5fa);
  }
}

.line-color-0 {
  .idx {
    background-color: #f66436;
    width: 1.5rem;
    height: 1.5rem;
    text-align: center;
    line-height: 1.5rem;
    border-radius: 3px;
  }
  .line-inner {
    transition: all 0.5s;
    background: linear-gradient(90deg, #f66436, #ff9e80);
  }
}

.line-color-1 {
  .idx {
    background-color: #ffbe34;
    width: 1.5rem;
    height: 1.5rem;
    text-align: center;
    line-height: 1.5rem;
    border-radius: 3px;
  }
  .line-inner {
    transition: all 0.5s;
    background: linear-gradient(90deg, #ffbe34, #ffde97);
  }
}

.line-color-2 {
  .idx {
    background-color: #77ce8e;
    width: 1.5rem;
    height: 1.5rem;
    text-align: center;
    line-height: 1.5rem;
    border-radius: 3px;
  }
  .line-inner {
    transition: all 0.5s;
    background: linear-gradient(90deg, #77ce8e, #cdfcd9);
  }
}

.table {
  --el-table-tr-bg-color: #19aeef20;
  --el-table-header-bg-color: #0a577b;
  --el-fill-color-lighter: #0000;
  --el-table-header-text-color: #fff;
}
</style>
